<template>
  <div id="app">
    <Gantt :tasks="tasks" :config="config" @doubleClickTask="doubleClickTask" @task-updated="taskUpdated" @task-selected="taskSelected"
           @link-updated="linkUpdated"/>

  </div>
</template>

<script>
	import Gantt from './components/Gantt'

	export default {
		name: 'app',
		components: {
			Gantt
		},
		data() {
			return {
				tasks: {
					data: [
						{id: 1, text: 'Task #1', mao: "text", start_date: '15-04-2017', name: '时间', duration: 3, progress: 0.3},
						{id: 3, text: 'Task #2', mao: "text", start_date: '18-04-2017', name: '时间', duration: 3, progress: 0.4}
					],
					links: [
						{id: 1, source: 1, target: 2, type: '0'}
					]
				},
				config: {
					// columns: [],
					lightbox: null
				}
			}
		},
		methods: {
			taskUpdated(id, actionType, task) {
				console.log("task update:", id, " actionType: ", actionType, " task:", task)
			},
			taskSelected(id, actionType, task) {
				console.log("taskSelected:", id, " actionType: ", actionType, " task:", task)
			},
			linkUpdated(id, actionType, task) {
				console.log("linkUpdated:", id, " actionType: ", actionType, " task:", task)
			},
			doubleClickTask(id, task) {
				console.log("doubleClickTask:", id, " task:", task)
      }
		},
		mounted: function () {
		}
	}
</script>

<style>
  @import "~dhtmlx-gantt/codebase/dhtmlxgantt.css";

  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
  }

  .gantt {
    height: 500px;
  }
</style>
